<template>
	<view class="content">
		<u-navbar title="切换身份" :border-bottom="false" :background="{background:'transparent'}" title-color="#fff"
			back-icon-color="#fff"></u-navbar>
		<view class="content_image">
			<u-image v-show="data.utype == 1"  :src="url + '/static/image04.jpg'" width="100vw" mode="widthFix"></u-image>
			<u-image v-show="data.utype == 2" :src="url + '/static/image05.jpg'" width="100vw" mode="widthFix"></u-image>
		</view>

		<view class="content_btm">
			<u-button :hair-line="false" hover-class="none" :ripple="false" :custom-style="data.customStyle"
				@click="changeIdentity">切换到{{data.utype == 1 ? '求职者' : '招聘者'}}</u-button>
			<u-button :hair-line="false" hover-class="none" :ripple="false" :custom-style="data.customStyleBack"
				@click="toBackPersonal">返回{{data.utype == 1 ? '招聘者' : '求职者'}}会员中心</u-button>
		</view>
	</view>
</template>

<script setup>
	import development from '/config/development'
	import production from '/config/productions'
	import {
		nextTick,
		reactive
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	const url = process.env.NODE_ENV === 'development' ? development.url : production.url;
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		customStyle: {
			backgroundColor: '#00D075',
			color: '#fff',
			border:'none'
		},
		customStyleBack: {
			border: '2rpx solid #00D075',
			color: '#00D075'
		}
	})
	onShow(() => {
		data.utype = uni.getStorageSync('utype')
	})
	// 切换身份
	const changeIdentity = () => {
		uni.$u.route('pages/login/login', {
			utype: data.utype == 1 ? 2 : 1
		})
	}
	// 返回个人中心页面
	const toBackPersonal = () => {
		uni.$u.route({
			type: 'tab',
			url: 'pages/personal/index'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		&_image {
			position: absolute;
			// top: var(--status-bar-height);
			top: 0;
		}

		&_btm {
			position: fixed;
			bottom: 0;
			/* #ifdef MP-WEIXIN */
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
			left: 0;
			right: 0;
			margin: auto;
			padding: 0 38rpx;
			background-color: #fff;

			:deep(.u-btn) {
				margin-bottom: 22rpx;
				font-size: 28rpx;
			}
		}
	}
</style>